/* Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* Note: we use display: block here to avoid positioning issues related to
   the use of overflow: hidden. */
:host {
  display: block;
  height: 50px;
  overflow: hidden;
  position: relative;
  width: 50px;
}

#icon {
  height: 100%;
  position: absolute;
  width: 100%;
}

#icon.multi-level {
  height: 500%;
}

#icon.level0 {
  top: 0px;
}

#icon.level1 {
  top: -100%;
}

#icon.level2 {
  top: -200%;
}

#icon.level3 {
  top: -300%;
}

#icon.level4 {
  top: -400%;
}

/* Connecting animation */

#icon.connecting {
  -webkit-animation: levels 1s infinite;
  -webkit-animation-timing-function: steps(4, start);
}

@-webkit-keyframes levels {
  from {
    top: 0%;
  }
  to {
    top: -400%;
  }
}

/* Badges. */
/* Note: These use left/right because we do not reverse the badges for RTL. */

/* Upper-left corner */
#technology {
  height: 40%;
  left: 0px;
  position: absolute;
  top: 0px;
}

/* Lower-right corner */
#roaming,
#secure {
  height: 40%;
  left: 60%;
  position: absolute;
  top: 60%;
  width: 40%;
}
